<template>
	<view class="spread_box">
		<view class="spread_card" v-for="(item,index) in msg" :key="item.id" @click="$navigateTo(detail_url)">
			<view class="card_top">
				<image :src="item.img"  ></image>
			</view>
			<view class="card_middle">
				<view class="middle_name">{{item.name}}</view>
				<view class="middle_span">{{item.span}}</view>
				<view class="middle_line"></view>
			</view>
			<view class="card_bottom">
				<view class="bottom_time">{{item.time}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				detail_url: '/pages/spread/detail/index'
			};
		},
		props: {
			msg: {
				type: Array,
				default: []
			},

		},
		mounted() {
			console.log(this.msg, "msg")
		},
		methods: {}

	};
</script>

<style scoped lang="scss">
.spread_box{
	padding: 32rpx 24rpx;
	.spread_card + .spread_card {
		margin-top: 24rpx;
	}
	// 卡片
	.spread_card{
		background-color: #fff;
		border-radius: 16rpx;
		.card_top{
			image{
				border-radius: 16rpx;
				width: 702rpx;
				height: 240rpx;
			}
		}
		.card_middle{
			.middle_name{
				padding: 20rpx 0 0 34rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
				line-height: 32rpx;
			}
			.middle_span{
				padding: 16rpx 0 0 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}
			.middle_line{
				padding: 10rpx 0 16rpx 0;
				border-bottom: 1rpx solid #eee;
			}
		}
		.card_bottom{
			.bottom_time{
				padding: 16rpx 0 16rpx 34rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999;
				line-height: 24rpx;
			}
		}
	}
}
</style>
